<template>
  <je-modal
    v-model:visible="visible"
    class="more-button-config"
    width="1200"
    :title="title"
    height="auto"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="handleOk"
    @close="handleClose"
  >
    <div class="tableWrap">
      <je-table
        ref="xTable"
        class="table"
        border
        stripe
        auto-resize
        sync-resize
        show-overflow
        keep-source
        show-header-overflow
        resizable
        header-align="center"
        height="300"
        :scroll-y="{ mode: 'wheel' }"
        :row-class-name="changeRowClassName"
        :edit-config="{
          trigger: 'click',
          mode: 'cell',
          showUpdateStatus: true,
          activeMethod: isTableEdit,
        }"
        :row-config="{ isCurrent: true, isHover: true }"
        :store="tableData"
        size="mini"
      >
        <je-table-column width="40" align="center">
          <template #header>
            <i style="font-size: 16px; cursor: pointer" class="fal fa-plus" @click="addColumn"></i>
          </template>
          <template #default="{ row }">
            <i
              style="font-size: 16px; cursor: pointer"
              class="fal fa-times"
              @click="deleteColumn(row)"
            ></i>
          </template>
        </je-table-column>
        <je-table-column
          field="text"
          title="按钮名"
          width="140"
          :edit-render="{ autofocus: '.ant-input' }"
        >
          <template #edit="{ row }">
            <je-input v-model:value="row.text" />
          </template>
        </je-table-column>
        <je-table-column
          field="code"
          title="编码"
          width="180"
          :edit-render="{ autofocus: '.ant-input' }"
        >
          <template #edit="{ row }">
            <je-input v-model:value="row.code" />
          </template>
        </je-table-column>
        <je-table-column field="icon" title="图标" width="140" :edit-render="{}">
          <template #edit="{ row }">
            <je-icon v-model:value="row.icon"></je-icon>
          </template>
        </je-table-column>
        <je-table-column title="方法" width="100" align="center">
          <template #default="{ row }">
            <span @click="addFunction(row)"
              ><i
                class="fas fa-bolt"
                :style="`cursor: pointer;color:${row.function ? '#F4CE4A' : '#8d98ab'} `"
              ></i
            ></span>
          </template>
        </je-table-column>
        <je-table-column
          field="expression"
          title="显示隐藏表达式"
          width="280"
          :edit-render="{ autofocus: '.ant-input' }"
        >
          <template #edit="{ row }">
            <je-input v-model:value="row.expression">
              <template #suffix>
                <i
                  class="setIcon fal fa-cog"
                  @click="
                    showExpress(
                      {
                        key: 'expression',
                        value: row.expression,
                      },
                      row,
                    )
                  "
                ></i>
              </template>
            </je-input>
          </template>
        </je-table-column>
        <je-table-column field="type" title="类型" width="120" :edit-render="{}" align="center">
          <template #edit="{ row }">
            <je-select v-model:value="row.type" allow-clear>
              <je-select-option
                v-for="(item, index) in [
                  {
                    value: 'button',
                    text: '按钮',
                    label: '按钮',
                  },
                  {
                    value: 'divider',
                    text: '分割线',
                    label: '分割线',
                  },
                ]"
                :key="index"
                :value="item.value"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </template>
          <template #default="{ row }">{{
            getSelectLabel(
              row.type,
              [
                {
                  value: 'button',
                  text: '按钮',
                  label: '按钮',
                },
                {
                  value: 'divider',
                  text: '分割线',
                  label: '分割线',
                },
              ],
              'value',
              'label',
            )
          }}</template>
        </je-table-column>
        <je-table-column
          field="relyName"
          title="权限依赖按钮"
          :edit-render="{ autofocus: '.ant-input' }"
        >
          <template #edit="{ row }">
            <je-grid-select
              v-model:value="row.relyName"
              name="relyName"
              config-info="JE_CORE_RESOURCEBUTTON,relyName~relyCode,RESOURCEBUTTON_NAME~RESOURCEBUTTON_CODE,S"
              :querys="querysArr"
              :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
            />
          </template>
        </je-table-column>
      </je-table>
    </div>
  </je-modal>
</template>

<script>
  import { ref, toRefs, reactive, defineComponent } from 'vue';
  import { Grid, Modal, Icon, Input, Select, InputSelect, Data } from '@jecloud/ui';
  import { listenerEditorModal, ListenerExpressModal } from '@/helper/index.js';
  import { useFuncStore } from '@/store/func-store';

  export default defineComponent({
    name: 'MoreButtonConfig',
    components: {
      JeModal: Modal,
      JeTable: Grid,
      JeTableColumn: Grid.Column,
      JeInput: Input,
      JeSelect: Select,
      JeSelectOption: Select.Option,
      JeIcon: Icon,
      JeGridSelect: InputSelect.Grid,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      recordData: {
        type: String,
        default: () => {},
      },
      funcId: {
        type: String,
        default: '',
      },
    },
    emits: ['changeModal'],
    setup(props, { emit }) {
      const dataArr = props.recordData ? JSON.parse(props.recordData) : [];
      const state = reactive({
        visible: props.visble,
        title: '更多按钮配置',
        xTable: ref(),
        tableData: Data.Store.useGridStore({
          data: dataArr,
        }),
        querysArr: [
          { code: 'RESOURCEBUTTON_FUNCINFO_ID', value: props.funcId, type: '=', cn: 'and' },
          { code: 'RESOURCEBUTTON_TYPE', value: ['GRID', 'ACTION'], type: 'in', cn: 'and' },
        ],
      });

      const methods = {
        isTableEdit({ row, column }) {
          if (
            row.type == 'divider' &&
            ['text', 'code', 'icon', 'expression', 'function', 'relyName'].includes(column.field)
          ) {
            return false;
          }
          return true;
        },
        // 显隐藏表达式
        showExpress(obj, row) {
          obj.funcId = props.funcId;
          ListenerExpressModal({
            ...obj,
            callback: (res) => {
              row[obj.key] = res.value;
            },
          });
        },
        // 点击方法
        addFunction(row) {
          const funcStore = useFuncStore();
          listenerEditorModal({
            eventType: 'default',
            eventInfo: row.function,
            funcId: funcStore.funcBean.id,
            callback: (obj) => {
              Modal.message('保存成功', 'success');
              row.function = obj.eventInfo;
            },
          });
        },
        handleClose() {
          state.visible = false;
          emit('changeModal', { visible: false });
        },
        // 类型为：分割线  时，整行背景色为灰色。
        changeRowClassName({ row }) {
          if (row.type == 'divider') {
            return 'scanBgColor';
          }
          return '';
        },
        handleOk() {
          state.visible = false;

          emit('changeModal', {
            visible: false,
            key: 'RESOURCECOLUMN_MOREBUTCONFIG',
            data:
              state.tableData.data && state.tableData.data.length
                ? JSON.stringify(state.tableData.data)
                : '',
          });
        },

        getSelectLabel(value, list, valueProp = 'value', labelField = 'label') {
          const item = list.find((item) => item[valueProp] === value);
          return item ? item[labelField] : null;
        },

        async addColumn() {
          const obj = {
            text: '',
            code: '',
            icon: '',
            function: '',
            expression: '',
            type: 'button',
            relyCode: '',
            relyName: '',
          };
          state.tableData.insert(obj, -1);
        },

        deleteColumn(row) {
          state.tableData.remove(row);
        },
      };
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style lang="less">
  .more-button-config {
    .scanBgColor {
      background: #e6e6e6 !important; // 这边的颜色需要找产品要一下
      i {
        cursor: default !important;
      }
    }
    .ant-input-affix-wrapper {
      padding: 2px 15px !important;
    }
  }
</style>
<style lang="less" scoped>
  .more-button-config {
    overflow: hidden;
    .tableWrap {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    .iconWrap {
      cursor: pointer;
    }
    // .inputWrap {
    //   position: relative;
    //   .setIcon {
    //     position: absolute;
    //     top: 50%;
    //     right: 10px;
    //     transform: translate(0, -50%);
    //     cursor: pointer;
    //     z-index: 1000;
    //   }
    // }
  }
</style>
